<template>
  <div class="chart-content">
    <div v-show="isChart" ref="chartRef" style="width: 100%; height: 300px"></div>
    <div v-show="!isChart" class="no-data">暂无数据</div>
  </div>

</template>

<script>
import * as echarts from "echarts";
import {getQualityOption } from '../js/echartOption'

export default {
  props:{
    reportData: {
      type: Array,
      default: () => [],
    },
    buName:{
      type: String,
      default: "华润集团",
    },
    qualityTotal: {
      type: [String,Number],
      default:0,
    }
  },
  data () {
    return {
      echartsInstance:null,
      chartRef:"",
      chatData:[],
      isChart: false,
    }
  },
  
  methods: {
    initChart(){
      const chatData = this.reportData?.map(item => {
        return {
          name: item.problemLabel,
          value:item.problemNum
        }
      })
      if(this.echartsInstance){
        this.echartsInstance.dispose();
      }
      this.echartsInstance = echarts.init(this.$refs.chartRef, 'default');
      const option = getQualityOption(chatData,this.qualityTotal);
      option && this.echartsInstance.setOption(option,true);
      window.addEventListener('resize',() =>{
        this.echartsInstance && this.echartsInstance.resize();
      })
    }
  },

  watch:{
    reportData:{
      handler(newVal) {
        if(newVal?.length){
          this.chatData = newVal;
          this.$nextTick(() => {
            this.initChart()
          })
          this.isChart = true;
        }
        else{
          this.chatData = [];
          this.isChart = false;
        }
      },
      deep: true,
      immediate: true
    }
  },
  activated() {
    this.$nextTick(() => {
      if(this.echartsInstance){
        this.echartsInstance.resize();
      }
    });
  },
  beforeDestroy(){
    if(this.echartsInstance){
      this.echartsInstance.dispose();
    }
  }
}
</script>

<style lang="less" scoped>
.chart-content {
  width: 45%;
  height: 100%;
  .no-data{
    height: 100%;
    line-height: 300px;
    text-align: center;
    color: #333;
    font-size: 14px;
  }
}
</style>
